<template>
  <div class="goods-box">
    <!-- 表头 -->
    <header>
        <el-select v-model="value" class="m-2" placeholder="选择门店">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
       </el-select>
      <el-button type="primary">查询</el-button>
    </header>
    <main>
        <el-table :data="state.goodsData" style="width: 100%">
          <!-- count: 302
          createdAt: "2022-10-12"
          created_at: "2022-10-12"
          goods_id: "943416"
          goods_name: "可口可乐"
          id: "GOODS-1665542274420"
          img: "/public/shop-goods/1665542228141.1.jpg"
          layer: 2
          position: 3
          price: "3.00"
          shelves_id: "ld003"
          shelves_name: "旺旺"
          shop_id: "13060078135"
          shop_name: "乐多便利店"
          updatedAt: "2022-10-12"
          updated_at: "2022-10-12"
          warning_count: 80 -->
          <el-table-column prop="goods_name" label="商品名字" width="220" />
          <el-table-column prop="shop_name" label="商店名字" width="200" />
          <el-table-column prop="shelves_name" label="货架名字" width="180" />
          <el-table-column prop="layer" label="层级" width="120" />
          <el-table-column prop="position" label="位置" width="120" />
          <el-table-column label="操作" width="150">
            <template #default>
               <span class="code" text @click="dialogTableVisible = true">生成码</span>
            </template>
          </el-table-column>
        </el-table>

        <el-dialog v-model="dialogTableVisible" title="条形码">
          <el-table :data="gridData">
            <el-table-column property="date" label="Date" width="150" />
            <el-table-column property="name" label="Name" width="200" />
            <el-table-column property="address" label="Address" />
          </el-table>
        </el-dialog>
    </main>
  </div>
</template>

<script setup>
import { ref ,reactive} from 'vue'
import { shopGoodList } from '@/apis/shop'
const value = ref('')
const dialogTableVisible = ref(false)
   const options = [
       {
         value: '开心便利店',
         label: '开心便利店',
       },
       { 
         value: '高新区一分店',
         label: '高新区一分店',
       },
       {
         value: '高新区',
         label: '高新区',
      },
       {
         value: '乐多便利店',
         label: '乐多便利店',
       },
       {
         value: '成都总店',
         label: '成都总店',
       },
     ]

    //门店商品数据
    //"商铺产品查询必须传递门店编码和商品名字"
    //shop_id=jerry&page=1&size=20
    const state = reactive({
      goodsData: []
    })
   const getGoods = async () => {
     const result = await shopGoodList({shop_id:'13060078135',page:1,size:10})
     state.goodsData = result.data.rows
     console.log(result)
   }
   getGoods()
</script>

<style lang="less" scoped>
   header{
    display: block;
    width: 100%;
    height: 80px;
    text-align: right;
    line-height: 80px;
    border-bottom:1px solid #ddd ;
    button{
      margin: 12px;
    }
   }
   main{
    height: 100%;
    background-color: #fff;
    padding: 8px 12px;
   }
   .cell button{
    margin-right: 10px;
   }
   .cell span{
    margin-right: 10px;
   }
   .code{
    color: #1890ff;
    cursor: pointer;
   }
</style>
